<template>
    <div class="Echat">
        <div id="main"></div>
    </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import * as echarts from "echarts";
export default defineComponent({
    name: "LineChart",
    components: {},
    setup() {
        onMounted(() => {
            let chartDom = document.getElementById("main")!;
            // type EChartsOption = echarts.EChartsOption;
            let myChart = echarts.init(chartDom);
            let option
            
            option = {
                title: {
                    text: "数据概况",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["居民数量", "签约量", "服务量"],
                    icon: "rect",
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "居民数量",
                        type: "line",
                        stack: "Total",
                        color: "rgb(41,132,248)",
                        data: [120, 132, 101, 134, 90, 230, 210],
                    },
                    {
                        name: "签约量",
                        type: "line",
                        stack: "Total",
                        color: "rgb(40,208,148)",
                        data: [220, 182, 191, 234, 290, 330, 310],
                    },
                    {
                        name: "服务量",
                        type: "line",
                        stack: "Total",
                        color: "rgb(255,98,98)",
                        data: [150, 232, 201, 154, 190, 330, 410],
                    },
                ],
            };
            option && myChart.setOption(option);
        });

        return {};
    },
});
</script>
<style lang="less" scoped>
  .Echat {
    position: relative;
    margin: 20px auto;
    // box-shadow: 10px 10px 5px rgb(242, 245, 246);
    #main {
      height: 450px;
    }
  }
</style>
    